<template>
    <div ref="lotRectangle" class="flex-box flex-wp opt-pad">
        <div :class="{
                'flex-box flex-pc wd-16' : circle,
                'wd-25' : title[1].indexOf('和数')<0,
                'flex-f1' : title[1].indexOf('和数')>-1
            }" v-for="(value,i) in content" :key="i">
            <div :id="playType+title[0]+value[2]+value[3]"
            :class="{
                'option-box' : !circle,
                'option-box-cir' : circle,
                'bg-c-wh' : classFil(value) < 0,
                'bg-c-sel' : classFil(value) > -1 
            }"
            @click="chooseLot(value[2], value[3])">
                <div :class="{ 'mar-t-25' : circle }">{{ value[0] }}</div>
                <div v-if="typeof odds == 'string'" class="odds">
                    {{ odds | noOdds($store.state.lotStatus) }}
                </div>
                <div v-else-if="theType == 'kd'" class="odds">
                    {{ odds[i] | noOdds($store.state.lotStatus) }}
                </div>
                <div v-else-if="theType == 'yzzh'" class="odds">
                    {{ title[0] | qwOdds(odds) | noOdds($store.state.lotStatus) }}
                </div>
                <div v-else class="odds">
                    {{ odds[value[1]] | noOdds($store.state.lotStatus) }}
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import { choose } from '../../common/js/common'
export default {
    data () {
        return {
            theType : ''
        }
    },
    created () {
        if(this.playType) this.theType = this.playType.slice(3)
    },
    props: {
        title : Array,
        content : Array,
        odds : [Object, Array, String],
        playType : String,
        circle : Boolean
    }, 
    filters : {
        // 封盘时不显示赔率
        noOdds : function(value, status){
            if(status == 1){
                return value
            }else{
                return '--'
            }
        },
        // 赔率选取 全五
        qwOdds : function(value, odds){
            if(value == 'q5'){
                return odds.qw
            }else{
                return odds.qszshs
            }
        }
    },
    methods : {
        // 选择彩票玩法
        chooseLot (playType, content) {
            choose(this.playType, this.title, playType, content)
        },
        classFil (data) {
            let id = this.playType+this.title[0]+data[2]+data[3]
            return this.$store.state.lotOptions.indexOf(id)
        }
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
</style>